<template>
	<view class="wrap">
		<u-navbar title="选择企业" @leftClick="back" :autoBack="true" bgColor="transparent"></u-navbar>
		<image class="image" src="@/static/bg_select.png" mode=""></image>
		<view class="company">
			<view class="title">请选择要登录的企业</view>
			<view class="list" v-if="companyList.length">
				<u-radio-group v-model="companyValue" placement="column" iconPlacement="right" activeColor="#00468C"
					@change="groupChange">
					<view class="item" :class="{active: companyValue === item.etpId}" v-for="(item, index) in companyList"
						:key="index">
						<u-radio :label="item.etpName" :name="item.etpId" @change="radioChange"></u-radio>
					</view>
				</u-radio-group>
			</view>
			<view class="confirm">
				<view @click="confirm">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import {
		userEtpBind,
		getUserMenuList
	} from '@/config/api/app.js'
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				companyValue: '',
				companyList: [],
				token: ''
			}
		},
		onLoad(option) {
			this.token = option.token
			this.companyList = JSON.parse(option.list)
			this.companyValue = this.companyList[0].etpId
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			//绑定企业
			postUserEtpBind() {
				let obj = {
					etpId: this.companyValue
				}
				userEtpBind(obj, {
					custom: {
						// title: '正在获取验证码……'
					}
				}).then((res) => {
					console.log(res,22222)
					if (res.code != 0) {
						uni.$u.toast(res.msg);
					} else {
						this.getMenu()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//查询菜单权限
			getMenu() {
				getUserMenuList().then((res) => {
					console.log(res,333333)
					if (res.code == 0) {
						Cache.set("MENU", res.data, 59 * 24 * 60 * 60);
					} else {
						uni.$u.toast(res.msg)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			confirm() {
				let options = {
					token: this.token,
					userInfo: this.companyList.filter((item) => {
						return item.etpId === this.companyValue
					})
				}
				this.LOGIN(options)
				this.postUserEtpBind()
				uni.$u.toast('正在跳转首页～')
				uni.reLaunch({
					url: '/pages/home/home'
				})
			},
			...mapMutations(["LOGIN"])
		}
	}
</script>

<style lang="scss">
	.wrap{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		padding: 0 64rpx;
		box-sizing: border-box;
		.image{
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
		}
	}
	.company {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		.list {
			max-height: 55%;
			overflow: auto;
	
			.item {
				padding: 0 32rpx;
				margin-bottom: 48rpx;
				border: 2rpx solid #DCDCDC;
				border-radius: 8rpx;
				&:last-child{
					margin-bottom: 0;
				}
				.u-radio{
					padding: 48rpx 0;
				}
				.u-radio__text{
					color: #DCDCDC !important;
				}
				&.active {
					border: 2rpx solid #003E81;
					.u-radio__text{
						color: #333333 !important;
					}
				}
	
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	
		.title {
			font-size: 48rpx;
			font-weight: 500;
			color: #333333;
			position: absolute;
			top: 200rpx;
			left: 0;
		}
	
		.confirm {
			position: absolute;
			bottom: calc(100rpx + env(safe-area-inset-bottom));
			left: 0;
			padding: 0 32rpx;
			box-sizing: border-box;
			width: 100%;
	
			view {
				width: 100%;
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				border-radius: 12rpx;
				text-align: center;
				background: linear-gradient(to right, #4d83b9, #003E81);
			}
		}
	}
</style>
